<template>
  <div class="createdApi">
    <div class="createdApiHeader">
      <span class="returnBtn" @click="returnFun"><i class="el-icon-back"></i> 返回API列表</span>
      <span style="display: inline-block;color:#d9d9d9;margin: 0 8px;vertical-align: middle;">|</span>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="saveApi">保存</el-button>
      <!--<el-dropdown class="btnItem" size="small" split-button type="primary" @click="handleClickAddAPI" @command="handleCommandAdd">-->
      <!--<i class="el-icon-plus"></i><span style="display: inline-block;margin-left: 10px;" @click="saveApi">保存</span>-->
      <!--<el-dropdown-menu slot="dropdown">-->
      <!--<el-dropdown-item command="handleClickAddApi">保存API</el-dropdown-item>-->
      <!--<el-dropdown-item command="handleClickExport">保存并继续新建API</el-dropdown-item>-->
      <!--</el-dropdown-menu>-->
      <!--</el-dropdown>-->
    </div>
    <div class="createdApiContent">
      <el-tabs type="border-card" v-if="JSON.stringify(editDataItem) !== '{}'">
        <el-tab-pane label="api描述">
          <apiDescribe :editDataItem="editDataItem" ref="apiDescribeDomEdit"></apiDescribe>
        </el-tab-pane>
        <el-tab-pane label="返回示例">
          <returnExample :editDataItem="editDataItem" ref="returnExampleDomEdit"></returnExample>
        </el-tab-pane>
        <el-tab-pane label="额外说明">
          <additionalInstruct :editDataItem="editDataItem" ref="additionalInstructDomEdit"></additionalInstruct>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import apiDescribe from './editApicontnet/apiDescribe'
  import returnExample from './editApicontnet/returnExample'
  import additionalInstruct from './editApicontnet/additionalInstruct'
  import {
    apiListUpload,
    getApiListDetalis
  } from '@/api/apiModel/api.js'
  export default {
    name: 'addApiPage',
    components: {
      apiDescribe,
      returnExample,
      additionalInstruct
    },
    data() {
      return {
        editDataItem: {}
      }
    },
    mounted() {
      console.log(this.$route.query.id)
      this.fetchData()
    },
    methods: {
      fetchData() {
        getApiListDetalis({ apiId: this.$route.query.id }).then(res => {
          console.log(res)
          this.editDataItem = res.data.data
        })
      },
      saveApi() {
        console.log(this.$refs.returnExampleDomEdit)
        const getListData = this.$refs.apiDescribeDomEdit.getApiData()
        getListData.tags = getListData.tags.toString()
        const getListDataDialog = this.$refs.returnExampleDomEdit.getDialogMsg()
        const getListDataItionalInstruct = { note: this.$refs.additionalInstructDomEdit.$data.itionalContent }
        apiListUpload(Object.assign(getListData, getListDataDialog, getListDataItionalInstruct), { apiId: this.$route.query.id }).then(res => {
          console.log(res)
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.$router.push({
            name: 'apiManage',
            query: { projectId: this.$store.state.user.projectId }
          })
        }).catch((err) => {
          this.$message.error('编辑失败')
          this.$router.push({
            name: 'apiManage',
            query: { projectId: this.$store.state.user.projectId }
          })
        })
        console.log(getListData)
      },
      handleClickAddAPI() {

      },
      handleCommandAdd() {

      },
      returnFun() {
        this.$router.push({
          name: 'projectApi',
          query: { projectId: this.$store.state.user.projectId }
        })
      }
    }
  }
</script>

<style scoped>
  .returnBtn:hover{
    color: #409EFF;
  }
</style>
